<template>
  <div class="top">
    <div class="left">
      <div class="time">
        <p>当前时间: {{ newTime }}</p>
      </div>
      <span @click="goHome">首页</span>
    </div>
    <div class="right">
      <span>欢迎来到我的数据大屏</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
let $router = useRouter()
const goHome = () => {
  $router.push('/home')
}
let newTime = ref(moment().format('YYYY年MM月DD日 HH:mm:ss'))

const timer = setInterval(function () {
  newTime.value = moment().format('YYYY年MM月DD日 HH:mm:ss')
}, 1000)

onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style scoped lang="scss">
.top {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    flex: 1;
    display: flex;

    .time {
      color: white;
      font-size: 25px;
      width: 564px;
      height: 36px;
      background: url(../images/dataScreen-header-left-bg.png) no-repeat;
      background-size: 100% 100%;
    }

    span {
      width: 135px;
      height: 42px;
      background: url(../images/dataScreen-header-btn-bg-l.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 30px;
      font-size: 20px;
      color: white;
    }
  }

  .right {
    flex: 3;
    background: url(../images/dataScreen-header-center-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;

    span {
      color: white;
      text-align: center;
      font-size: 30px;
      margin-top: 10px;
    }
  }
}
</style>
